import * as React from 'react';
import { useAppSelector } from '../../../app/hooks';
import PriceChart from '../ui/PriceChart';
import { selectPositions } from '../domain/positionsSlice';
import { selectTicks } from '../domain/ticksSlice';
import { selectExtremums } from '../domain/extremumsSlice';
import {
    Extremum as UiExtremum, 
    ChartPosition as UiPositions
} from '../ui/ui.model';
import {
    BarData as UiCandles, 
    Time
} from 'lightweight-charts';
import { PositionInfo, Tick } from '../domain/domain.model';

const PriceChartContainer = (): React.ReactElement => {
    const ticks: Tick[] = useAppSelector(selectTicks);
    const candles: UiCandles[] = ticks.map(({ open, close, high, low, time}) => ({
        time: time/1000 as Time,
        open,
        high,
        low,
        close,
    }));
    const extremums: UiExtremum[] = useAppSelector(selectExtremums);
    const domainPositions: PositionInfo[] = useAppSelector(selectPositions);
    const positions: UiPositions[] = domainPositions.map(({ inOrders, outOrders, stopLoss}) => ({
        in: inOrders,
        out: outOrders,
        stopLoss,
    }));

    return (
        <PriceChart 
            candles={candles}
            extremums={extremums}
            positions={positions}
        />
    )
}

export default PriceChartContainer;